import { moduleClassSetter } from "@/common"
import style from "./index.module.less"
import { Button, Select } from "antd"
import { useEffect, useMemo, useState } from "react"
import CommonTable from "../../table/index.jsx"

interface SchemaItem {
  label: string
  value: string
  hasInit: boolean
}

const classSelector = moduleClassSetter(style)

const columns = [
  { headerName: "门店名", field: "name" },
  { headerName: "地址", field: "address" },
  { headerName: "经度", field: "longitude" },
  { headerName: "纬度", field: "latitude" },
]

export default function LowCodeConfig() {
  const [currentSchema, setCurrentSchema] = useState("")
  const [schemaOptions, setSchemaOptions] = useState<SchemaItem[]>([])
  const hasInit = useMemo(
    () => schemaOptions.find((item) => item.value === currentSchema)?.hasInit,
    [currentSchema]
  )

  useEffect(() => {
    setSchemaOptions([
      { label: "表格", value: "table", hasInit: true },
      { label: "图表", value: "chart", hasInit: false },
    ])
  }, [])

  const [schemaFields, setSchemaFields] = useState([])

  return (
    <div className={classSelector("config-page")}>
      <div className={classSelector("config-header")}>
        <Select
          className={classSelector("schema-select")}
          options={schemaOptions}
          value={currentSchema}
          onChange={(value) => setCurrentSchema(value)}
        ></Select>

        <Button type="primary" disabled={!currentSchema}>
          查询
        </Button>

        {currentSchema && (
          <Button type="primary">{hasInit ? "修改" : "执行初始化"}</Button>
        )}
      </div>

      <div className={classSelector("config-content")}>
        <CommonTable columns={columns} data={schemaFields} disablePageNav />
      </div>
    </div>
  )
}
